<template>
  <div class="wrapdiv">
    <el-form :inline="true" :model="form_search" class="formsearch">
      <!-- <el-form-item label="资源类型">
        <el-select v-model="form_search.resource_type" placeholder="资源类型">
          <el-option label="图片" value="picture"></el-option>
          <el-option label="视频" value="video"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="资源名称">
        <el-input v-model="form_search.value" placeholder=""> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <!-- <el-button type="danger" @click="onReset">重设</el-button> -->
      </el-form-item>
    </el-form>

    <!-- <input type="button" value="top" style="position: absolute; top:200px;left:300px;z-index: 1000;" /> -->
    <!-- fixed absolute -->
    <el-button
      icon="el-icon-delete"
      class="fixed-delete-btn"
      type="danger"
      :style="{left: isCollapsed? '156px':'256px'}"
      size="small"
      circle=""
      plain
      @click="deleteResource"
    ></el-button>

    <el-row>
      <el-col class="operateCol" :span="24">
        <el-button
          type="success"
          size="medium"
          title="上传图片、视频素材"
          @click="to_uplaod"
          icon="el-icon-upload el-icon--right"
          >上传</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          @row-click="rowClick"
          ref="multipleTable"
          :data="resourceData"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="{
            backgroundColor: 'rgba(0,0,0,.1)',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="url"
            label="url"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="url"
            label="内容"
            width="450"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <!-- <img :src='require("../assets/1.jpg")' /> -->
                <!-- <img src='../assets/2.jpg' /> -->
                <!-- {{scope.row.type}} -->
                <img
                  class="inlist"
                  v-if="scope.row.type == 'picture'"
                  :src="scope.row.url"
                  alt=""
                  @click="showMask(scope.row)"
                />
                <video
                  class="inlist"
                  v-else
                  :src="scope.row.url"
                  :controls="false"
                  alt=""
                  @click="showMask(scope.row)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="400"
          ></el-table-column>
          <el-table-column prop="type" label="类型" width="100">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin: 10px">
      <el-col>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <div class="mask" v-show="visible_mask" @click="closeMask">
      <img
        class="inmask"
        v-if="cur_resource.type == 'picture'"
        :src="cur_resource.url"
        alt=""
      />
      <video class="inmask" v-else :src="cur_resource.url" controls></video>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { mapMutations, mapState } from "vuex";
/*
查询屏幕ip,
查询屏幕名称,
查询屏幕类型,
查询厂家,


添加屏幕, 删除屏幕,     ...分页.
展示屏幕信息列表: checkbox, 行政区,名称,卡号/IP,厂家,宽度,高度,分组,任务,截屏.
双击修改 屏幕信息,

*/
export default {
  name: "Resource",
  data() {
    return {
      cur_resource: {},
      visible_mask: false,
      form_search: {
        // ip: "",
        value: "", //资源名字
        //resource_name: "",
        // screen_type: "",
        // screen_brand: "",
      },

      resourceData: [],
      //已 勾选 的 记录
      multipleSelection: [],

      ///page
      total: 0,
      pageNum: 1,
      pageSize: 10,
    };
  },
  computed: {
    ...mapState(["isCollapsed"]),
  },
  mounted() {
    document.onkeyup = (e) => {
      if (e && e.key == "Escape") {
        this.visible_mask = false;
      }
    };

    //获取 最新 图片视频 节目的列表
    this.getReourceListByPage();
  },
  destroyed() {
    document.onkeyup = null;
  },
  methods: {
    // ...mapMutations(["setIsCollapsed"]),
    closeMask() {
      console.log("close mask");
      this.visible_mask = false;
    },
    showMask(cur_resource) {
      this.cur_resource = cur_resource;
      this.visible_mask = true;
    },
    async getReourceListByPage() {
      let ret = await this.$http.get(
        `resourcesByPage?query=${this.form_search.value}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`
      );

      let { total, pageNum, resources } = ret.data.data;
      this.total = total;
      this.pageNum = pageNum;
      console.log(resources);
      this.resourceData = resources;
    },
    to_uplaod() {
      this.$router.push("/resource_upload");
    },
    async deleteResource() {
      //删除资源(文字,图片,视频)时, ,
      // .
      try {
        let isContinue = await this.$confirm(
          "删除资源(图片,视频) [将会同时删除对应的调度计划]!",
          "即将删除, 请确认操作!!!",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        if (isContinue != "confirm") return;
      } catch (err) {
        console.log("catch" + err);
        return;
      }
      //multipleSelection  遍历,提取id, 发送到后台 删除 对应的资源,
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选要删除的资源");
      } else {
        // for (const iterator of this.multipleSelection) {
        //   console.log(iterator.resource_id);
        // }
        let resource_ids = this.multipleSelection.map((v) => v.resource_id);

        console.log(resource_ids);

        //发给后台 {res_ids:[1,3,5,6666,444]} delete 方法 没有 请求体, 得换请求方法
        await this.$http.delete("resources", {
          data: { resource_ids: resource_ids },
        });
        this.getReourceListByPage();
      }
    },
    rowClick(row, col, event) {
      // console.log(row);
      //单击 行 选择切换
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getReourceListByPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getReourceListByPage();
    },

    onSubmit() {
      console.log(this.form_search);
      this.getReourceListByPage();
    },
  },
};
</script>

<style scoped>
.el-pagination {
  display: inline-block;
}

video.inlist {
  width: 200px;
  height: 50px;
}
img.inlist {
  width: 200px;
  height: 40px;
}
/* video.inlist:hover {
  width: 500px;
  height: 200px;
}
img.inlist:hover {
  width: 500px;
  height: 200px;
} */
img.inmask {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
video.inmask {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 没问题 */
.mask {
  position: fixed;
  background-color: black;
  opacity: 1;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.wrapdiv {
  width: 98%;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  padding: 5px;
}

.formsearch {
  margin-top: 10px;
}
.formsearch .el-form-item {
  margin: 10px;
}
.operateCol {
  padding: 10px;
}

.operateCol .el-button {
  font-size: 16px;
  /* color: red; */
}
.fixed-delete-btn {
  position: fixed;
  top: 151px;
  /* left: 256px; */
  z-index: 1001;
  opacity: 0.7;
}
.fixed-delete-btn:hover {
  opacity: 1;
}
</style>
